<template>
  <el-dialog :title="createStudentForm.id?'修改学生':'添加学生'" :visible.sync="showStudentDialog" width="1000px"
             @closed="handleClose" :destroy-on-close="true" :lock-scroll="false" @open="dialogOpen">

    <div class="el-dialog-div">
      <el-form :model="createStudentForm" ref="createStudentForm" :rules="editRules" label-width="100px">

        <el-row>
          <el-col :span="5">
            <el-row class="el-row">
              <h6>教职工上传</h6>
              <el-col>
<!--                <el-upload-->
<!--                    ref="upload"-->
<!--                    action="#"-->
<!--                    list-type="picture-card"-->
<!--                    accept="image/jpeg,image/gif,image/png"-->
<!--                    multiple-->
<!--                    :limit="1"-->
<!--                    :auto-upload="false"-->
<!--                    :on-exceed="handleExceed"-->
<!--                    :on-change="handleAvatar"-->
<!--                    name="studentPhoto"-->
<!--                >-->
<!--                  <div slot="file" slot-scope="{file}">-->
<!--                    <img class="el-upload-list__item-thumbnail" :src="createStudentForm.imageUrl" alt="">-->
<!--                    <span class="el-upload-list__item-actions">-->
<!--                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">-->
<!--                        <i class="el-icon-zoom-in"></i>-->
<!--                      </span>-->
<!--                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">-->
<!--                        <i class="el-icon-delete"></i>-->
<!--                      </span>-->
<!--                    </span>-->
<!--                  </div>-->
<!--                  <i slot="default" class="el-icon-plus"></i>-->
<!--                </el-upload>-->
<!--                <el-dialog :visible.sync="dialogVisible">-->
<!--                  <img width="100%" :src="dialogImageUrl" alt="">-->
<!--                </el-dialog>-->
                <uploadImage :limit="1" v-model="createStudentForm.avatar" :value="createStudentForm.avatar"></uploadImage>
              </el-col>
              <hr/>
            </el-row>
            <el-row>
              <el-col>
                抓拍上传
              </el-col>
              <hr/>
            </el-row>
            <el-row>
              <el-col>
                家长上传
              </el-col>
              <hr/>
            </el-row>
          </el-col>
          <el-col :span="19" style="padding-left:8px;border-left: solid gray 1px">
            <h4>学生信息</h4>
            <el-row class="el-row">
              <el-col>
                <el-form-item label="选择班级：" prop="class_id">
                  <el-select v-model="createStudentForm.class_id" placeholder="请选择" style="width:100%">
                    <el-option-group
                        v-for="group in grades"
                        :key="group.name"
                        :label="group.name">
                      <el-option
                          v-for="item in group.classes"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="createStudentForm.name" placeholder="请输入学生姓名" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别：" prop="gender">
                  <el-select v-model="createStudentForm.gender" placeholder="请选择性别" class="ele-block" clearable>
                    <el-option
                        v-for="item in genders"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="el-row">
              <el-col :span="12">
                <el-form-item label="学号：" prop="number">
                  <el-input v-model="createStudentForm.number" placeholder="请输入学号" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学生状态：" prop="study_status">
                  <el-select v-model="createStudentForm.study_status" placeholder="请选择学生状态" class="ele-block" clearable>
                    <el-option
                        v-for="item in studentStatus"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code + ':' + item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="el-row">
              <el-col>
                <el-form-item label="出生日期：" prop="birthday">
                  <el-date-picker
                      v-model="createStudentForm.birthday"
                      type="date"
                      value-format="timestamp"
                      placeholder="选择日期" style="width:100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="证件类型：" prop="idcard_type">
                  <el-select v-model="createStudentForm.idcard_type" placeholder="请选择证件类型" class="ele-block" clearable>
                    <el-option
                        v-for="item in idcardTypes"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code + ':' + item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件号：" prop="idcard">
                  <el-input v-model="createStudentForm.idcard" placeholder="请输入证件号" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="宿舍类型：" prop="accommodation_type">
                  <el-select v-model="createStudentForm.accommodation_type" placeholder="请输入宿舍类型编码" class="ele-block" clearable>
                    <el-option
                        v-for="item in accommodationTypes"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code + ':' + item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="户籍：" prop="census_register">
                  <el-input v-model="createStudentForm.census_register" placeholder="请输入户籍" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="住址：" prop="address">
              <el-input v-model="createStudentForm.address" placeholder="请输入住址" clearable/>
            </el-form-item>

            <el-form-item label="备注：" prop="note">
              <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注"
                  v-model="createStudentForm.note">
              </el-input>
            </el-form-item>

            <h4>考勤卡信息</h4><span>（当前设备考勤卡号只支持与人脸同步下发）</span>
            <el-form-item label="ic卡号1：" prop="ic_card1">
              <el-input v-model="createStudentForm.ic_card1" placeholder="请输入ic卡号1" clearable/>
            </el-form-item>

            <el-form-item label="ic卡号2：" prop="ic_card2">
              <el-input v-model="createStudentForm.ic_card2" placeholder="请输入ic卡号2" clearable/>
            </el-form-item>

            <el-form-item label="ic卡号3：" prop="ic_card3">
              <el-input v-model="createStudentForm.ic_card3" placeholder="请输入ic卡号3" clearable/>
            </el-form-item>

            <h4>监护人信息</h4>
            <div v-for="(item, index) in createStudentForm.dynamicItem" :key="index">
              <el-row class="el-row">
                <el-col :span="6">
                  <el-form-item
                      label="家庭"
                      :prop="'dynamicItem.' + index + '.kindship'"
                      :rules="{required: true, message: '家庭不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-select v-model="item.kindship" placeholder="请选择" class="ele-block" clearable>
                      <el-option
                          v-for="item in kindShips"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code + ':' + item.name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item
                      label="姓名"
                      :prop="'dynamicItem.' + index + '.parentName'"
                      :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-input v-model="item.parentName" placeholder="请输入姓名" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item
                      label="电话"
                      :prop="'dynamicItem.' + index + '.mobile'"
                      :rules="{required: true, message: '电话不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-input v-model="item.mobile" placeholder="请输入电话" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteItem(item, index)" round></el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-row class="el-row">
              <el-col :span="6" :offset="20">
                <el-button @click="addItem" type="primary">添加监护人</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="showStudentDialog=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'
export default {
  name: "CreateStudent",
  components: {uploadImage},
  data() {
    return {

      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      genders: [
        {'value': 1, name: '男'},
        {'value': 2, name: '女'},
        {'value': 3, name: '未知'},
      ],
      grades: [],
      kindShips: [],
      studentStatus: [],
      idcardTypes: [],
      accommodationTypes: [],
      createStudentForm: {
        dynamicItem: [],
      },  // 表单数据
      editRules: {  // 表单验证规则
        school_year: [
          {required: true, message: '请选择级别', trigger: 'blur'}
        ],
        dept_type: [
          {required: true, message: '请选择学部', trigger: 'blur'}
        ],
      },
      showStudentDialog: this.showAddStudentForm // 子组件不能直接修改父组件prop参数
    };
  },
  props: {
    showAddStudentForm: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['createStudentForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/student/edit', this.createStudentForm).then(res => {
            loading.close();
            if (res.data.code === 200) {
              this.$message({type: 'success', message: res.data.msg});
              this.$emit('reload')
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
      this.showStudentDialog = false;
    },
    /**
     * 关闭页面
     */
    handleClose(hide) {
      if (hide) {
        hide();
      }
      this.createStudentForm={dynamicItem: []} // 清空表单数据
      this.$emit('update:showAddStudentForm', false)
    },
    addItem () {
      this.createStudentForm.dynamicItem.push({
          'kindship': '',
          'parentName': '',
          'mobile': '',
      })
    },
    deleteItem (item, index) {
      this.createStudentForm.dynamicItem.splice(index, 1)
    },
    handleRemove(file) { // 图片移除
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex( fileItem => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1);
    },
    handlePictureCardPreview(file) { // 图片预览
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed() {
      this.$message.warning('只能传入一张图片');
    },
    //图片上传成功实现本地预览
    handleAvatar(file) {

      this.createStudentForm.imageUrl = file.url;
    },
    /**
     * 对话框弹出时回调方法
     */
    dialogOpen() {
      this.getClasses();
      this.getStudentStatus();
      this.getIdcardTypes();
      this.getAccommodationTypes();
      this.getKinships();
    },
    getClasses() {
      this.$http.get('/grade/getClassesGroupByGrade').then(res => {
        if (res.data.code === 200) {
          this.grades = res.data.result[0];
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getStudentStatus() {
      this.$http.get('/student/getStudentStatus').then(res => {
        if (res.data.code === 200) {
          this.studentStatus = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getIdcardTypes() {
      this.$http.get('/student/getIdcardTypes').then(res => {
        if (res.data.code === 200) {
          this.idcardTypes = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getAccommodationTypes() {
      this.$http.get('/student/getAccommodationType').then(res => {
        if (res.data.code === 200) {
          this.accommodationTypes = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getKinships() {
      this.$http.get('/student/getKinship').then(res => {
        if (res.data.code === 200) {
          this.kindShips = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  },
  watch: {
    showAddStudentForm(val) { // 监听该值的变化
      this.showStudentDialog = val;
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}
.el-dialog-div{
  padding-right: 10px;
  height: 60vh;
  overflow: auto;
}

</style>
